<template>
  <div class="commit">
    <van-nav-bar
      title="结算订单"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="orderBox">
      <div class="selectBox">
        <div class="addressBox">
          <div class="user">
            <div class="name">{{ addressInfo.name }}</div>
            <div class="phone">{{ addressInfo.tel }}</div>
            <div class="default" v-if="addressInfo.isDefault">默认</div>
          </div>
          <div class="detailAddress">{{ addressInfo.address }}</div>
        </div>
        <div class="select" @click="isSelect = true">
          <van-icon name="arrow" size="20px" />
        </div>
        <van-popup
          v-model="isSelect"
          round
          position="bottom"
          closeable
          class="popup"
        >
          <h3 class="popupTitle">选择地址</h3>
          <div
            class="addressPopup"
            v-for="ads in list"
            :key="ads.aid"
            @click="confirm(ads.aid)"
          >
            <div class="user">
              <div class="name">{{ ads.name }}</div>
              <div class="phone">{{ ads.tel }}</div>
              <div class="default" v-if="ads.isDefault">默认</div>
            </div>
            <div class="detailAddress">{{ ads.address }}</div>
          </div>
          <div>
            <van-button block color="#CC9145" @click="intoNew"
              >新增地址</van-button
            >
          </div>
        </van-popup>
      </div>
      <div class="payShopList">
        <h3>订单信息</h3>
        <ItemList v-for="sp in shopPay" :key="sp.sid" :item="sp"></ItemList>
        <div class="infoBottom">
          <div class="total">
            <span>共记 {{ count }} 件</span>
            <span class="totalPrice">合计 &yen;{{ total }}.00</span>
          </div>
        </div>
      </div>
      <div class="button">
        <van-button block round color="#CC9145" @click="paying"
          >去结算</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/commit.less";
import { mapState, mapMutations } from "vuex";
import ItemList from "../components/ItemList.vue";
export default {
  name: "Commit",
  data() {
    return {
      sids: [],
      list: [],
      addressInfo: [],
      isSelect: false,
      shopPay: [],
      count: 0,
      total: 0,
    };
  },
  components: {
    ItemList,
  },
  computed: {
    ...mapState(["shopCount"]),
  },
  methods: {
    ...mapMutations(["changeShopCount"]),
    back() {
      this.$router.go(-1);
    },
    paying() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/pay",
        data: {
          appkey: this.appkey,
          tokenString,
          sids: JSON.stringify(this.sids),
          phone: this.addressInfo.tel,
          address: this.addressInfo.address,
          receiver: this.addressInfo.name,
        },
      })
        .then((res) => {
          // console.log("res pay ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code == 60000) {
            this.changeShopCount(this.shopCount - this.sids.length);
            this.$router.push({ name: "Order" });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    confirm(aid) {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/findAddressByAid",
        params: {
          appkey: this.appkey,
          tokenString,
          aid,
        },
      })
        .then((res) => {
          // console.log("res findAddressByAid ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 40000) {
            let data = res.data.result[0];

            data.isDefault = !!data.isDefault;
            data.address =
              data.province + data.city + data.county + data.addressDetail;
            this.addressInfo = data;
            // console.log('addressInfo==>',this.addressInfo)
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
      this.isSelect = false;
    },
    intoNew() {
      this.$router.push({ name: "NewAddress" });
    },
    getAddressData() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/findAddress",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getAddressData ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 20000) {
            res.data.result.forEach((ele) => {
              ele.isDefault = Boolean(ele.isDefault);
              ele.address =
                ele.province + ele.city + ele.county + ele.addressDetail;
              if (ele.isDefault) {
                this.addressInfo = ele;
              }
            });
            this.list = res.data.result;
            // console.log('默认地址==>',this.addressInfo)
            // console.log(this.list);
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getcommitShopCar() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/commitShopcart",
        params: {
          appkey: this.appkey,
          tokenString,
          sids: JSON.stringify(this.sids),
        },
      })
        .then((res) => {
          // console.log("res commitShopcart ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 50000) {
            this.shopPay = res.data.result;
            this.sum();
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    sum() {
      let totalPrice = 0;
      let num = 0;
      this.shopPay.forEach((v) => {
        totalPrice += v.price * v.count;
        num += v.count;
      });

      this.total = totalPrice;
      this.count = num;
    },
  },
  created() {
    this.sids = this.$route.query.sids.split(",");
    this.getAddressData();
    this.getcommitShopCar();
  },
};
</script>

<style lang="less" scoped>
</style>